Table 表格

<table>
<tr>：代表 (table row)，橫的 row
<td>：代表 (table data)，直的
<th>：代表 (table heading)：代表表頭，會顯示粗體
先使用 <table>，之後使用 <tr>，再使用 <th> or <td>
CSS 屬性
border-collapse：預設值為 separate ，代表表格的邊框彼此分開，因此改設定 collapse，代表合併為一個邊框

HTML

<table class="price">
    <tr>
        <th>標題 1</th>
        <th>標題 2</th>
        <th>標題 3</th>
    </tr>
    <tr>
        <td>內容 1</td>
        <td>內容 2</td>
        <td>內容 3</td>
    </tr>
    <!-- <tr>
        <td colspan="2">合併 1</td>
        <td rowspan="2">合併 2</td>
    </tr>
    <tr>
        <td>內容 1</td>
        <td>內容 2</td>
    </tr> -->
</table>

CSS

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.price th ,.price td{
    border: 1px solid #000;
}

.price th {
    padding: 10px;
}

呈現結果如下，如果呈現不同，可能未 CSS Reset

將註解部分解除，有合併之顯示結果如下

Form 表單

<form>：有 action 來確定要送出的地方，method 則是送出的方法
<input>：用來輸入資料

• type：依需求修改種類，如 text 就是輸入文字， submit 則是送出鈕
• name：則是用定義好的名稱來與接收資料端溝通
• placeholder：未輸入時之顯示內容

<label>：可用來說明，並且在點擊時可關聯到對應的 id
for：for id，點了可到指定的 id 位置，如指定的 <input>

<form action="送出的地方" method="送出資料的方法">
    表單內容
    <input type="text" name="mail">
    <input type="text" name="phone">
    <input type="submit" value="next">
</form>

呈現結果並試著輸入一些內容

按下 submit 按鈕，觀察網址列
會在最後面出現剛剛輸入的資料，從 ? 開始

index.html?mail=xxx%40mail&phone=0900

增加說明文字等資料

    <form action="">
        <label for="mail">電子郵件：</label>
        <input id="mail" type="text" placeholder="請輸入電子郵件"  name="mail">
        <br>
        <label for="phone">電話：</label>
        <input id="phone" type="text" placeholder="請輸入電話" name="phone">
        <br>
        <input type="submit" value="next">
    </form>

form input 表單輸入

<input>：說明 type 的單選與多選

• radio：單選
  同一群要定義 name，value 回傳值
  描述可用 label，for="id"
  若要設定預勾選項，checked
• checkbox：多選
  同一群要定義 name，value 回傳值
  用js控制最多 / 最少 / 固定幾選

<h2>你的性別</h2>
<input type="radio" name="sex" value="1" id="sex1"><label for="sex1">男</label>
<input type="radio" name="sex" value="2" id="sex2" checked><label for="sex2">女</label>

<h2>你的興趣</h2>
<input type="checkbox" name="hobby" value="1" id="hobby1"><label for="hobby1">讀書</label>
<input type="checkbox" name="hobby" value="2" id="hobby2"><label for="hobby2">看電影</label>
<input type="checkbox" name="hobby" value="3" id="hobby3"><label for="hobby3">運動</label>

<select>：下拉選單，name 設定在這
<option>：內容選項，value 設定在這
設定預設選項，selected
<textarea>：多行輸入

<h2>年份</h2>
<label for="year">年份</label>
<select id="year" name="year">
    <option value="2020" selected>2020</option>
    <option value="2021">2021</option>
    <option value="2023">2022</option>
</select>
<br>
<h2>建議</h2>
<textarea name="content" id="" cols="30" rows="10"></textarea>
<br>
<input type="submit" value="送出">
<br>

Form 的 CSS 樣式

border：外框
color：字型的顏色
border-radius：邊框圓角
background-color：背景色
padding：留白
font-size：字型大小
width：區塊的寬度
cursor：滑鼠座標的樣式
:hover：滑鼠移動過去的樣式

input {
    border: 3px solid red;
    color: white;
    border-radius: 5px;
    background-color: #000;
    padding: 5px 10px;
    font-size: 16px;
    width: 200px;
}

.btn {
    background: green;
    color: #fff;
    border: 1px solid red;
    border-radius: 5px;
    padding: 10px 30px;
    cursor: pointer;
}

.btn:hover {
    background-color: #000;
}